<template>
	<div class="ji">{{ title }}</div>
	<div class="left__info__user df ac">
		<el-avatar v-if="courseItem.publisherAvatar" :size="24" :src="courseItem.publisherAvatar"
			style="margin-right: 10px;" />
		<el-avatar v-else :size="26" src="/src/assets/images/gir.png" style="margin-right: 10px;" />
		{{ courseItem.publisher }}
		<div class="timer">时长：{{ convertSecondsToHMS(classItem.time) }}</div>
	</div>
	<!-- app观看 -->
	<el-popover :width="350" trigger="hover" placement="bottom-start">
		<div class="df ac">
			<img :src="download.qrcodeImage" alt="" style="width: 120px;height: 120px;">
			<div style="font-size: 20px;line-height: 40px;margin-left: 24px;">
				<!-- 下载鑫莘学苑APP<br>
				随时随地学习视频 -->
				{{ download.qrcodeDesc }}
			</div>
		</div>
		<template #reference>
			<div class="left__info__applook df ac">
				<div class="img"></div>
				<span>app观看</span>
			</div>
		</template>
	</el-popover>
	<div class="left__info__collect df ac jc" style="margin-right: 20px;" @click="ChangeFav(courseItem.isFav)">
		<div class="img" :class="courseItem.isFav ? 'al' : 'l'"></div>
		<span>收藏</span>
	</div>
	<!-- <el-button class="left__info__collect df ac jc" @click="go2Copy()">
		<div class="img d"></div>
		<span>分享</span>
	</el-button> -->

	<div class="left__info__collect df ac jc" @click="go2Copy()">
		<div class="img d"></div>
		<span>分享</span>
	</div>
</template>

<script setup lang="ts">
import api from '@/api/api';
import { useUserStore } from '@/stores';
import { convertSecondsToHMS } from '@/utils/utils';
import { dataBox } from 'js-tool-big-box';
//组件命名-----
defineOptions({ name: "videoc-infoIetm" })
const props = withDefaults(defineProps<{
	classItem?: any;
	courseItem?: any;
	title?: string;
}>(), {
	classItem: () => { },
	courseItem: () => { }
});

const store = useUserStore()

const form = reactive({
    copyVal: 'https://app-admin.superjuanjuan.com/h5/#/',

  })
const go2Copy =() =>{
    const text = form.copyVal;
      dataBox.copyText(text, () => {
        ElMessage({
            type: 'success',
            message: '复制成功'
        })
      }, () => {
        ElMessage({
            type: 'error',
            message: '复制异常，请重新复制'
        })
      }
    )
  }

//收藏
const ChangeFav = async (fav: boolean) => {
	let res
	console.log("🚀 ~ file: infoItem.vue:59 ~ ChangeFav ~ props.courseItem:", props.courseItem)
	if (fav) {
		res = await api.CourseCollectCancelFav_API({ userId: store.userInfo.userId, courseId: props.courseItem.id })
	} else {
		res = await api.CourseCollectfav_API({ userId: store.userInfo.userId, courseId: props.courseItem.id })
	}
	if (res.code === 0) {
		ElMessage({
			message: '操作成功',
			type: 'success',
		})
		props.courseItem.isFav = !props.courseItem.isFav
	}
}
onMounted(() => {
	Getdownload()
})

const download = ref<any>({})
const Getdownload = async () => {
	const res = await api.Getdownload_API()
	if (res.code === 0) {
		download.value = res.data
	}
}


</script>

<style lang="scss" scoped>
.ji {
	padding: 0 20px;
	height: 34px;
	line-height: 34px;
	border-radius: 17px;
	background-color: #1F3955;
	text-align: center;
	color: $bcolor;
}

.left__info__user {
	margin-left: 20px;
	color: $color1;

	.timer {
		margin-left: 20px;
	}
}

.left__info__applook {
	margin-left: auto;
	margin-right: 30px;
	color: $color1;
	cursor: pointer;

	&:hover {
		color: $bcolor;

		.img {
			background-image: url('@/assets/images/applook1.png');
		}
	}

	.img {
		width: 14px;
		height: 22px;
		margin-right: 10px;
		background-image: url('@/assets/images/applook.png');
		background-size: contain;
	}
}

.left__info__collect {
	width: 94px;
	height: 34px;
	line-height: 34px;
	border-radius: 17px;
	background-color: #373735;
	cursor: pointer;

	.img {
		width: 16px;
		height: 16px;
		margin-right: 10px;
		background-size: contain;
	}

	.l {
		background-image: url('@/assets/images/collect2.png');
	}

	.al {
		background-image: url('@/assets/images/collect1.png');
	}

	.d {
		background-image: url('@/assets/images/fenx.png');
	}
}
</style>
